<!--
 * @Author: songxiang songxiang0806@qq.com
 * @Date: 2025-08-27 17:52:33
 * @LastEditors: songxiang songxiang0806@qq.com
 * @LastEditTime: 2025-09-02 15:37:37
 * @FilePath: \supermap-webgl\src\components\high-realism\high-realism.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <menus-container title="天气仿真">
    <el-tabs v-model="activeTabName" class="my-tabs" @tab-click="onTabClick">
      <el-tab-pane label="体积云" name="cloud">
        <el-form label-width="auto" size="small">
          <el-form-item label="开启">
            <el-switch v-model="voloumtricCloudsOptions.useVolumeCloud" />
          </el-form-item>
          <el-form-item
            label="渲染质量"
            v-show="voloumtricCloudsOptions.useVolumeCloud"
          >
            <el-select v-model="voloumtricCloudsOptions.renderQualityType">
              <el-option
                v-for="item in voloumtricCloudsOptions.renderQualityOption"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item
            label="云层厚度(米)"
            v-show="voloumtricCloudsOptions.useVolumeCloud"
          >
            <el-slider
              :min="2000"
              :max="20000"
              :step="1"
              v-model="voloumtricCloudsOptions.thickness"
              show-input
              :show-input-controls="false"
              input-size="small"
            />
          </el-form-item>
          <el-form-item
            label="云层覆盖度"
            v-show="voloumtricCloudsOptions.useVolumeCloud"
          >
            <el-slider
              :min="0"
              :max="1"
              :step="0.01"
              v-model="voloumtricCloudsOptions.coverage"
              show-input
              :show-input-controls="false"
              input-size="small"
            />
          </el-form-item>
          <el-form-item
            label="风速(km/h)"
            v-show="voloumtricCloudsOptions.useVolumeCloud"
          >
            <el-slider
              :min="0"
              :max="200"
              :step="1"
              v-model="voloumtricCloudsOptions.speed"
              show-input
              :show-input-controls="false"
              input-size="small"
            />
          </el-form-item>
          <el-form-item
            label="风向(度)"
            v-show="voloumtricCloudsOptions.useVolumeCloud"
          >
            <el-slider
              :min="0"
              :max="360"
              :step="0.1"
              v-model="voloumtricCloudsOptions.direction"
              show-input
              :show-input-controls="false"
              input-size="small"
            />
          </el-form-item>
          <el-form-item
            label="显示高层云"
            v-show="voloumtricCloudsOptions.useVolumeCloud"
          >
            <el-switch v-model="voloumtricCloudsOptions.useHighCloud" />
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="高度雾" name="fog">
        <el-form label-width="auto" size="small">
          <el-form-item label="开启">
            <el-switch v-model="fogOptions.useFog" />
          </el-form-item>
          <el-form-item label="密度" v-show="fogOptions.useFog">
            <el-slider
              :min="0.01"
              :max="1.0"
              :step="0.01"
              v-model="fogOptions.density"
              show-input
              :show-input-controls="false"
              input-size="small"
            />
          </el-form-item>
          <el-form-item label="衰减系数" v-show="fogOptions.useFog">
            <el-slider
              :min="0.1"
              :max="2.0"
              :step="0.01"
              v-model="fogOptions.decay"
              show-input
              :show-input-controls="false"
              input-size="small"
            />
          </el-form-item>
          <el-form-item label="颜色" v-if="fogOptions.useFog">
            <el-color-picker v-model="fogOptions.color" />
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="丁达尔" name="lightShaft">
        <el-form label-width="auto" size="small">
          <el-form-item label="开启">
            <el-switch v-model="lightShaftOptions.useLightShaft" />
          </el-form-item>
        </el-form>
      </el-tab-pane>
    </el-tabs>
  </menus-container>
</template>

<script lang="ts" setup>
import {} from 'vue'
import MenusContainer from '/@src/components/menus-container/menus-container.vue'
import useHighRealism from './use-high-realism'

const {
  activeTabName,
  onTabClick,
  voloumtricCloudsOptions,
  fogOptions,
  lightShaftOptions
} = useHighRealism()
</script>

<style scoped lang="scss">
@import url('./high-realism.scss');
</style>
